<template>
	<view>
		<view v-for="(item,index) in orderData.commodityData">
			<view class="commodity">
				<image :src="item.main_img"></image>
				<view class="title">{{item.commodity_title}}</view>
			</view>
			<view class="evaluation_content">
				<view class="title">文字评价</view>
				<textarea v-model="evaluateContent[index].text" placeholder="把你的不满意都说出来" />
				<view class="evaluate_imgs">
					<view class="select picture" @click="select(index)">
						<image src="@/static/star/add_img.png" class="evaluate_img"></image>
					</view>
					<view class="picture" v-for="(evaluate_img,i) in evaluateContent[index].imgs">
						<image src="@/static/star/guanbi.png" class="close" @click="remove_img(index,i)"></image>
						<image :src="evaluate_img" class="evaluate_img"></image>
					</view>
				</view>
			</view>

			<view class="star_evaluation">
				<view class="">
					<text class="title">描述相符:</text>
					<view v-for="i in star">
						<image src="@/static/star/StarEvaluation1.png" v-if="i>(evaluateContent[index].describe_grade)"
							@click="selectStarEvaluation(index,0,i,1)"></image>
						<image src="@/static/star/StarEvaluation2.png" v-else
							@click="selectStarEvaluation(index,0,i,2)"></image>
					</view>
				</view>
				<view class="">
					<text class="title">送货服务:</text>
					<view v-for="i in star">
						<image src="@/static/star/StarEvaluation1.png" v-if="i>(evaluateContent[index].delivery_grade)"
							@click="selectStarEvaluation(index,1,i,1)"></image>
						<image src="@/static/star/StarEvaluation2.png" v-else
							@click="selectStarEvaluation(index,1,i,2)"></image>
					</view>
				</view>
				<view class="">
					<text class="title">服务态度:</text>
					<view v-for="i in star">
						<image src="@/static/star/StarEvaluation1.png" v-if="i>(evaluateContent[index].service_grade)"
							@click="selectStarEvaluation(index,2,i,1)"></image>
						<image src="@/static/star/StarEvaluation2.png" v-else
							@click="selectStarEvaluation(index,2,i,2)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="publish" @click="submit">发布</view>
	</view>
</template>

<script>
	import izUploader from '@/helpYouShop/utils/iz-aloss-uploader/iz-aloss-uploader.js';
	export default {
		data() {
			return {

				evaluateContent: [],
				star: 5,
				orderData: [], //订单信息

			}
		},
		onLoad() {
			this.token = uni.getStorageSync("token");

			var orderData = uni.getStorageSync("orderData");
			this.orderData = orderData;

			for (let var1 in orderData.commodityData) {
				var commodityData = orderData.commodityData[var1]

				var evaluate = {
					id: commodityData.id,
					text: "",
					imgs: [],
					describe_grade: 5,
					delivery_grade: 5,
					service_grade: 5

				}

				this.evaluateContent.push(evaluate)


			}

		},
		methods: {
			remove_img(index, i) {
				console.log(index)
				var self = this;
				uni.showModal({
					title: '提示！',
					content: '你确定删除？',
					success: (res) => {
						if (res.confirm) {
							var evaluate = [];
							for (var i = 0; i < self.evaluateContent[index].imgs.length; i++) {
								if (index == i) {

								} else {
									evaluate.push(self.evaluateContent[index].imgs[i])
								}
							}
							self.evaluateContent[index].imgs = evaluate
							self.$forceUpdate();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			selectImg() {
				let self = this;
				uni.chooseImage({
					success: function(res) {
						let uploadTask = izUploader(
							res.tempFilePaths[0],
							'png',
							data => {
								console.log('data', data)
							},
							err => {
								console.log(err);
							}
						);
						uploadTask.onProgressUpdate(async function(r) {

						});
					}
				});
			},
			//选择图片
			select(index) {
				var self = this;
				var upimgs = [];
				var imgsPath = [];
				if (self.evaluateContent[index].imgs.length >= 6) {
					uni.showToast({
						title: "最多只能上传6张图片",
						icon: "none"
					});
					return
				}
				uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						if ((self.evaluateContent[index].imgs.length + res.tempFilePaths.length) > 6) {
							uni.showToast({
								title: "最多只能上传6张图片",
								icon: "none"
							});
							return
						}
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							upimgs.push(res.tempFilePaths[i])
						}

						for (var i = 0; i < upimgs.length; i++) {
							uni.showLoading({
								title: '请稍等...'
							})
							let uploadTask = izUploader(
								upimgs[i],
								'png',
								data => {
									let imgPath = 'http://oss.youkutongcheng.com' + data
									self.evaluateContent[index].imgs.push(imgPath)
								},
								err => {
									console.log(err);
								}
							);
						}
						uni.hideLoading()
						console.log('upimgs', upimgs)
						console.log('imgsPath', imgsPath)
					}
				});
			},
			//提交发布
			submit() {
				uni.showLoading({
					title: '请稍等',
					mask: true
				})
				this.$http('goods.newEvaluate', {
					token: this.$tools.getToken(),
					orderNumber: this.orderData.orderNumber,
					evaluateEntities: JSON.stringify(this.evaluateContent),
				}).then(res => {
					uni.hideLoading()
					console.log('res', res)
					if (res.code == 200) {
						this.$tools.showMsg('评论成功')
						uni.navigateBack()
					}
				})
			},
			selectStarEvaluation(i, index, grade, status) {
				switch (index) {
					case 0:
						if (status == 1) {
							this.evaluateContent[i].describe_grade = grade;
						}
						if (status == 2) {
							if (grade == 1 && this.evaluateContent[i].describe_grade == 1) {
								return;
							}
							this.evaluateContent[i].describe_grade = grade;


						}
						break;
					case 1:
						if (status == 1) {
							this.evaluateContent[i].delivery_grade = grade;
						}
						if (status == 2) {
							if (grade == 1 && this.evaluateContent[i].delivery_grade == 1) {
								return;
							}
							this.evaluateContent[i].delivery_grade = grade;


						}
						break;
					case 2:
						if (status == 1) {
							this.evaluateContent[i].service_grade = grade;
						}
						if (status == 2) {
							if (grade == 1 && this.evaluateContent[i].service_grade == 1) {
								return;
							}
							this.evaluateContent[i].service_grade = grade;


						}
						break;
					default:
						break;
				}
				this.$forceUpdate()

			}

		}
	}
</script>

<style>
	page {
		background-color: #FAFAFA;
		padding-bottom: 160upx;
	}

	.publish {
		text-align: center;
		background-color: #FA436A;
		color: #FFFFFF;
		padding: 20upx;
		position: fixed;
		bottom: 0upx;
		width: 100vw;

	}

	.commodity {
		padding: 16upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #FFFFFF;
		margin-top: 1px;
	}

	.commodity>image {
		width: 110upx;
		height: 110upx;
		margin-right: 10upx;
	}

	.commodity .title {
		width: 600upx;
		line-height: 16px;
		color: #262626;
		font-size: 16px;
		/* 		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1; */

	}

	.star_evaluation {
		background-color: #FFFFFF;
		padding-top: 40upx;
		margin-top: 16upx;
	}

	.star_evaluation>view {
		font-size: 16px;
		margin: 10upx 16upx;
		padding-bottom: 40upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.star_evaluation>view>view {
		margin-top: 12upx;
	}

	.star_evaluation>view>view>image {
		width: 39upx;
		height: 39upx;
		margin: 0upx 10upx;

	}

	.evaluation_content {
		margin-top: 16upx;
	}

	.evaluation_content .title {
		font-size: 16px;
		padding: 16upx;
		color: #555555;
	}

	.evaluation_content {
		background-color: #FFFFFF;
	}

	.evaluation_content>textarea {
		width: 100%;
		height: 260upx;
		background-color: #FFFFFF;
		font-size: 16px;
		color: #000000;
		padding: 24upx;
		box-sizing: border-box;
		line-height: 40upx;
	}

	.evaluate_imgs {
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
		padding: 20upx;
		flex-wrap: wrap;
	}

	.evaluate_imgs .picture {
		width: 210upx;
		height: 210upx;
		margin-right: 20upx;
		position: relative;
		margin-top: 10upx;

	}

	.evaluate_imgs .evaluate_img {
		width: 100%;
		height: 100%;

	}

	.evaluate_imgs .picture .close {
		width: 36upx;
		height: 36upx;
		position: absolute;
		z-index: 10;
		left: 172upx;
	}
</style>
